<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div :class="{ unLockLogin: isShowForm }" class="lockscreen" @keyup="isShowForm = true" @mousedown.stop @contextmenu.prevent>
    <div class="login-box">
      <el-avatar :size="80" :src="imgUrl" />
      <div class="username">{{ userStore.userInfo.U_Name }}</div>
      <el-input v-model="password" type="password" placeholder="请输入锁屏密码" @keyup.enter="onLogin()" show-password />
      <div>
        <el-button link size="small" type="primary" @click="onLogin">进入系统</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useLocksSreenStore } from "@/stores/modules/lockscreen";
import { useUserStore } from "@/stores/modules/user";
import ACrypto from "@/utils/crypto";
import md5 from "js-md5";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// pinia
const lockscreenStore = useLocksSreenStore();
const userStore = useUserStore();

const isShowForm = ref(!lockscreenStore.lockPwd);
const imgUrl = computed(() => {
  return import.meta.env.VITE_STATIC + userStore.userInfo.U_Picture;
});
// 密码框绑定字段
const password = ref("");
// 登录
const onLogin = async () => {
  const pwd = password.value.trim();
  if (pwd === "") return proxy.$message.warning("密码不能为空");
  proxy.$vueAxios
    .post(
      "MasterBaseUsers/Validate",
      {
        u_Name: ACrypto.setSS(userStore.userInfo.U_Name),
        u_PWD: md5(pwd)
      },
      { noLoading: true }
    )
    .then((res: any) => {
      console.log(res);
      if (res.Mark) {
        unlockScreen();
      } else {
        proxy.$message.warning("密码错误，请重新输入");
      }
    });
};
// 取消锁屏/解锁锁屏
const unlockScreen = () => {
  isShowForm.value = false;
  lockscreenStore.setLock(false);
};
</script>

<style lang="scss" scoped>
.lockscreen {
  display: flex;
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: white;

  &.unLockLogin {
    background-color: rgb(25 28 34 / 78%);
    backdrop-filter: blur(7px);
  }

  .login-box {
    display: flex;
    position: absolute;
    top: 45%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 260px;
    transform: translate(-50%, -50%);

    & * {
      margin-bottom: 14px;
    }

    .username {
      font-size: 22px;
      font-weight: 700;
    }
  }
}
</style>
